<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="t/css/style.css"/>
</head>
<body>
        <div class="catbox">
        <table id="cartTable">
            <thead>
            <tr>
                <th><label>
                    <input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
                <td class="price">5999.88</td>
                <td class="count"><span class="reduce"></span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">5999.88</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
                <td class="price">3888.50</td>
                <td class="count"><span class="reduce"></span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">3888.50</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
                <td class="price">1428.50</td>
                <td class="count"><span class="reduce"></span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">1428.50</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
                <td class="price">640.60</td>
                <td class="count"><span class="reduce"></span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">640.60</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">
            <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选</label>
            <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice"/>
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="t/images/images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span></div>
        </div>
    </div>
    
    <script>
        var dataList = [
        {
            goodsId: "A001",
            goodsName: "Casio/卡西欧 EX-TR350",
            goodsImg: "t/images/images/1.jpg",
            goodsNum: 1,
            goodsPrice: 5999.88
        }, {
            goodsId: "A002",
            goodsName: "Canon/佳能 PowerShot SX50 HS",
            goodsImg: "t/images/images/2.jpg",
            goodsNum: 2,
            goodsPrice: 3888.50
        },
        {
            goodsId: "A003",
            goodsName: "Sony/索尼 DSC-WX300",
            goodsImg: "t/images/images/3.jpg",
            goodsNum: 3,
            goodsPrice: 1428.50
        },
        {
            goodsId: "A004",
            goodsName: "Fujifilm/富士 instax mini 25",
            goodsImg: "t/images/images/4.jpg",
            goodsNum: 4,
            goodsPrice: 640.60
        },
        {
            goodsId: "A004",
            goodsName: "Fujifilm/富士 instax mini 25",
            goodsImg: "t/images/images/4.jpg",
            goodsNum: 4,
            goodsPrice: 640.60
        },
        {
            goodsId: "A004",
            goodsName: "Fujifilm/富士 instax mini 25",
            goodsImg: "t/images/images/4.jpg",
            goodsNum: 4,
            goodsPrice: 640.60
        },
        {
            goodsId: "A004",
            goodsName: "Fujifilm/富士 instax mini 25",
            goodsImg: "t/images/images/4.jpg",
            goodsNum: 4,
            goodsPrice: 640.60
        }
    ]

    // 对数据进行排序
    dataList.sort(function(a,b){
        return a.goodsPrice*a.goodsNum-b.goodsPrice*b.goodsNum;
    })
    // sort方法改变原数组
    
    var html=""
    var tbody=document.getElementsByTagName("tbody")[0]
   dataList.forEach(function(item,index){
       var goodsImg=item.goodsImg;
       var goodsName=item.goodsName;
       var goodsPrice=item.goodsPrice;
       var goodsNum=item.goodsNum;

    //    ''单引号拼接字符串模板
        // html += '<tr class="tr1">'+
        //         '<td class="checkbox"><input class="check-one check" type="checkbox"/></td>'+
        //         '<td class="goods"><img src=" '+ goodsImg + '"alt=""/><span>'+goodsName+'</span></td>'+
        //         '<td class="price">'+goodsPrice+'</td>'+
        //         '<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>'+
        //         '<td class="subtotal">'+goodsPrice+'</td>'+
        //         '<td class="operation"><span class="delete">删除</span></td>'+
        //         '</tr>'

        // es6波浪号字符串模板
        // 1.波浪号里的字符串允许换行（单引号里的字符串不能换行）
        // 2.拼接变量时使用${} {}里面可以写变量，也可以写简单的js代码，比如说三目运算符

        html += `<tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="${goodsImg}" alt=""/><span>${goodsName}</span></td>
                <td class="price">${goodsPrice}</td>
                <td class="count"><span class="reduce">${goodsNum>1?"-":""}</span>
                    <input class="count-input" type="text" value="${goodsNum}"/>
                    <span class="add">+</span></td>
                <td class="subtotal">${goodsPrice*goodsNum}</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>`
   })
   tbody.innerHTML=html

   function getTotal(){}
    var pricetotal=document.getElementById("priceTotal");
    var addlist=document.getElementsByClassName("add");
    var redulist=document.getElementsByClassName("reduce");
    var deletelist=document.getElementsByClassName("delete");
    var checklist=document.getElementsByClassName("check-one")
    var checkall=document.getElementsByClassName("check-all")[0]
    var deleteall=document.getElementById("deleteAll");
    var selectedtotal=document.getElementById("selectedTotal")
     // 加法   1. 点击数量+1   2. 小计价格要更新   3. 减号出现   
    for(var i=0;i<addlist.length;i++){
       addlist[i].onclick=function(){
          var num=this.previousElementSibling.value//数量
          num++;
          var price=this.parentElement.previousElementSibling.innerHTML//单价
          this.previousElementSibling.value=num
          var subinp=this.parentElement.nextElementSibling;
          subinp.innerHTML=(price*num).toFixed(2)//小数计算的精度问题
          this.previousElementSibling.previousElementSibling.innerHTML="-"
          total()
       }
    }

     // 减号  
    // 1. 数量减1      
    // 3. 数量 等于一的时候 "-" 要消失  4.数量等于1时 再次点击减号没有用
    // 2.小计要更新     
    for(var i=0;i<redulist.length;i++){
            redulist[i].onclick=function(){
                var num=this.nextElementSibling.value //数量 
                if(num==1){
                    return false
                }
                num--
                if(num==1){
                this.innerHTML=""
                }
                this.nextElementSibling.value=num ;
                var price=this.parentElement.previousElementSibling.innerHTML//单价
                var subinp=this.parentElement.nextElementSibling;
                subinp.innerHTML=(price*num).toFixed(2)//小数计算的精度问题
                total()
            }
    }

    // 删除 删除这一行   
    for(var i=0;i<deletelist.length;i++){
        deletelist[i].onclick=function(){
           this.parentElement.parentElement.remove()
           var count=0
          for(var j=0;j<checklist.length;j++){
              if(checklist[j].checked){
              count++
            }
          }
          if(count==checklist.length&&count!=0){
              checkall.checked=true
          }
          else{
            checkall.checked=false
          }
          
          total()  
        }  
    }
    
    // 全选    
    checkall.onclick=function(){
        var flag=checkall.checked
       for(var i=0;i<checklist.length;i++){
           checklist[i].checked=flag
       }
       if(flag){
        total()
       }
       else{
        pricetotal.innerHTML="0.00"
        selectedtotal.innerHTML=0
       }
    }
    
    // 单选
     for(var i=0;i<checklist.length;i++){
        checklist[i].onclick=function(){
            checkall.checked=false 
          var count=0
          for(var j=0;j<checklist.length;j++){
              if(checklist[j].checked){
              count++
            }
          }
          if(count==checklist.length){
              checkall.checked=true
          }
          total()
     }
     }

    //下面的删除    
    deleteall.onclick=function(){
        for(var i=0;i<checklist.length;i++){
            if(checklist[i].checked){
                checklist[i].parentElement.parentElement.remove()
                i--
            }
        }
        total()
    }
    
    //  全选计算总价
     function total(){
        var pricetotal=document.getElementById("priceTotal");
        var subtlist=document.getElementsByClassName("subtotal");
        var numlist=document.getElementsByClassName("count-input")
        var totalprice=0
        var totalnum=0
          for(let i=0;i<subtlist.length;i++){
            var price=subtlist[i].innerHTML*1
            if(checklist[i].checked){
               totalprice+=price
               totalnum+=numlist[i].value*1
            } 
          }
         pricetotal.innerHTML=totalprice.toFixed(2)
         selectedtotal.innerHTML=totalnum
     }

    //  input框事件
    var numlist=document.getElementsByClassName("count-input")
    for(var i=0;i<numlist.length;i++){
        numlist[i].oninput=function(){
              var num=this.value   //数量
              var price=this.parentElement.previousElementSibling.innerHTML //单价
              this.parentElement.nextElementSibling.innerHTML=(num*price).toFixed(2)
              total()
        }
    }
    </script>
</body>
</html>